<template>
	<view class="">
		<dsl-navbar title="动态详情" bgTopImg="white" isBack></dsl-navbar>
		<view class="head padding rowsb align-center">
			<view class="align-center">
				<view>
					<image :src="dynamicData.userAvatar" mode="aspectFill" class="avatar" 
						@click="$tools.push('/pages/user/modules/userInfo?id='+dynamicData.userId)"
					></image>
				</view>
				<view class="margin-left">
					<view class="name">{{dynamicData.userName}}</view>
					<view class="address margin-top-xs">
						<image src="/static/dynamic/imgdingwei-1.png" mode="" class="address_icon"></image>
						<text class="address_name one_overflow">{{dynamicData.location}}</text>
					</view>
				</view>
			</view>
			<view class="text-gray text-sm">
				{{dynamicData.createTime}}
			</view>
		</view>
		<view class="text-center margin-top">
			<image src="/static/ces.jpg" mode="widthFix" style="width: 690rpx;" class="radius"></image>
		</view>
		<view class="padding">
			{{dynamicData.gender}}
		</view>
		<view class="plguins padding-lr padding-bottom">
			<view class="rowsb align-center" style="width: 50%;">
				<view class="align-center">
					<image src="/static/message/imgxingxing.png" mode="" class="icon"></image>
					<text>22</text>
				</view>
				<view class="align-center" @click="likeMoments">
					<image src="/static/message/imgdianzan.png" mode="" class="icon" v-if="dynamicData.like ==0"></image>
					<image src="/static/message/imgdianzan-1.png" mode="" class="icon" v-if="dynamicData.like ==1"></image>
					<text>{{ dynamicData.likeNumber}}</text>
				</view>
				<view class="align-center">
					<image src="/static/dynamic/imgxiaoxi-6.png" mode="" class="icon"></image>
					<text>{{dynamicData.commentNumber}}</text>
				</view>
			</view>
			<view>
				<image src="/static/dynamic/imgshipin-1.png" mode="" class="icon"></image>
			</view>
		</view>
		<view class="padding solid-top">
			<view class="comment_title">
				全部评论
			</view>
			<view class="comment flex rowsb padding-tb" v-for="(item,index) in dynamicData.comments"
				@click="$tools.push('/pages/user/modules/userInfo?id='+item.userId)"
			>
				<view class="flex">
					<view>
						<image :src="item.userAvatar" mode="aspectFill" class="comment_avatar"></image>
					</view>
					<view class="margin-left-sm">
						<view class="comment_name">{{item.userName}}</view>
						<view class="comment_content margin-top-sm">{{item.content}}</view>
					</view>
				</view>
				<view class="comment_time">{{item.createTime}}</view>
			</view>
		</view>

		<view class="input_body align-center rowsb padding">
			<view class="align-center input rowsb padding-right">
				<input type="text" value="" placeholder="输入你的评论" v-model="inputValue" @confirm="commontMen" />
				<!-- <image src="/static/chat/imglian.png" mode="" class="input_icon"></image> -->
			</view>
			<view class="submit" @click="commontMen()">
				发布
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'

	export default {
		data() {
			return {
				momentsId: '', //动态id
				inputValue: '', //评论内容
			}
		},
		//生命周期函数
		onReady() {},
		onLoad(option) {
			this.momentsId = option.id //动态id
			this.getmomentsDetail({
				id: option.id
			}) //动态详情
		},
		onShow() {},
		methods: {
			/**
			 * getmomentsDetail 动态详情
			 * likeMomentsApi 点赞
			 * addCommentApi 发布评论
			 */
			...mapActions('dynamic', ['getmomentsDetail', 'addCommentApi', 'likeMomentsApi']),
			//评论
			commontMen() {
				this.addCommentApi({
					momentsId: this.momentsId,
					content: this.inputValue
				})
				this.inputValue = ''
				this.getmomentsDetail({
					id: this.momentsId
				}) //动态详情
			},
			// 点赞
			likeMoments() {
				this.likeMomentsApi({
					momentsId: this.momentsId,
					content: this.inputValue
				})
				this.getmomentsDetail({
					id: this.momentsId
				}) //动态详情
			},
		},

		computed: {
			...mapState('dynamic', ['dynamicData'])
		},
		components: {},
	}
</script>

<style lang="scss">
	//头部
	.head {
		.avatar {
			width: 84rpx;
			height: 84rpx;
			background: #EEEEEE;
			opacity: 1;
			border-radius: 42rpx;
		}

		.address_icon {
			width: 42rpx;
			height: 42rpx;
		}

		.address_name {
			font-size: 24rpx;
			font-family: PingFang SC;
			color: #9AA2B5;
			opacity: 1;
			width: 300upx;
		}
	}

	// 功能
	.plguins {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.icon {
			width: 42rpx;
			height: 42rpx;
			margin-right: 10rpx;
		}

		text {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #9AA2B5;
			opacity: 1;
		}
	}

	//评论
	.comment_title {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #000000;
		opacity: 1;
	}

	.comment {
		.comment_avatar {
			width: 74rpx;
			height: 74rpx;
			background: #EEEEEE;
			border-radius: 999rpx;
		}

		.comment_name {
			width: 300rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #171D34;
		}

		.comment_content {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #000000;
		}

		.comment_time {
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #9AA2B5;
		}
	}

	page {
		padding-bottom: 120rpx;
	}

	//输入框
	.input_body {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9;
		background-color: white;

		.input {
			width: 586rpx;
			height: 78rpx;
			background: #F7F6FA;
			opacity: 1;
			border-radius: 39px;
		}

		input {
			width: 75%;
			margin-left: 30rpx;
		}

		.input_icon {
			width: 52rpx;
			height: 52rpx;
		}

		.submit {
			width: 111rpx;
			height: 78rpx;
			background: linear-gradient(180deg, #EAA019 0%, #BA4949 100%);
			border-radius: 39rpx;
			line-height: 78rpx;
			color: white;
			text-align: center;
		}

	}
</style>
